<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慧题通-登录</title>
</head>
<body>
<div id="app" v-loading="loading">

    <el-row type="flex" justify="center" align="middle" style="height:100%">
        <el-col style="width:350px;">
            <el-card class="loginBox" v-if="!registering">
                <el-form ref="form" :model="loginForm" label-width="45px">
                    <p style="text-align: center">登录</p><br>
                    <el-form-item label="邮箱">
                        <el-input v-model="loginForm.mail" placeholder="请输入邮箱" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="loginForm.password" placeholder="请输入密码" show-password
                                  clearable></el-input>
                    </el-form-item>
                </el-form>
                <el-row type="flex" justify="center" align="middle">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="registering = true">注册</el-button>
                </el-row>
            </el-card>

            <el-card class="registerBox" v-if="registering">
                <el-form ref="form" :model="registerForm" label-width="70px">
                    <p style="text-align: center">注册</p><br>
                    <el-form-item label="邮箱">
                        <el-input v-model="registerForm.mail" placeholder="请输入邮箱" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-row align="middle" type="flex" justify="space-between">
                            <el-col :span="16">
                                <el-input v-model="registerForm.code" placeholder="请输入验证码" clearable></el-input>
                            </el-col>
                            <el-col :span="7">
                                <el-button type="text" @click="sendMail" :disabled="isCountingDown" v-loading="loadingSend">
                                    {{ isCountingDown ? `重新发送(${countdown}s)` : `发送验证码` }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="registerForm.password" placeholder="请输入密码" show-password
                                  clearable></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="registerForm.passwordAgain" placeholder="请确认密码" show-password
                                  clearable></el-input>
                    </el-form-item>
                </el-form>
                <el-row type="flex" justify="center" align="middle">
                    <el-button @click="registering = false">返回登录</el-button>
                    <el-button type="primary" @click="register">注册</el-button>
                </el-row>
            </el-card>
        </el-col>
    </el-row>

</div>
</body>

<script src="../../js/vue.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">

<link rel="stylesheet" href="../../css/login.css">

<script src="../../js/login.js"></script>

</html>